<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单验证</title>
  </head>
  <body>
    <p>作业内容，写表单验证，判断两次输入的密码是否一致！</p>
    <div id="errors"></div>
    <form action="http://bigabc.top/" onsubmit="return onSubmit()">
      密码1：<input type="text" name="pd_1" />
      <br />
      密码2：<input type="text" name="pd_2" />
      <br />
      <button>提交</button>
    </form>
    <script>
      function onSubmit() {
        let pd_1 = document.querySelector('[name="pd_1"]').value.trim()
        let pd_2 = document.querySelector('[name="pd_2"]').value.trim()
        if (pd_1 || pd_2 == false) {
          message('请输入密码')
        } else if (pd_1 == pd_2) {
          message('两者密码一致！')
        } else {
          message('两者密码不一样！')
        }
        return false
      }
      function message(message) {
        let container = document.querySelector('#errors')
        container.innerHTML = message
      }
    </script>
  </body>
</html>
